<%@page import="java.net.URL"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%! public URL fileURL;%>

<sql:setDataSource driver="${applicationScope.dbdriver}"
                   url="${applicationScope.connstr}"
                   user="root"
                   password=""/>
<c:set var="userName" value="Bonix"/>
<c:set var="client" value= "${sessionScope.tarClient}" />
<sql:query var="clients">
    SELECT * FROM accounts
</sql:query>

<c:forEach var="targetClient" items="${clients.rows}">
    <c:if test="${targetClient.username == userName}">
        <c:set var="password" value="${targetClient.password}"/>
        <c:set var="isActivated" value="${targetClient.isActivated}"/>
        <c:set var="acctype" value="${targetClient.acctype}"/>   
    </c:if>  
</c:forEach>

<!DOCTYPE html>
<html>
    <c:set scope="request" var="title" value="Service Provider"/>
    <jsp:include page="/WEB-INF/account/accountHead.jsp"/>

    <body>
        <jsp:include page="/WEB-INF/banner.jsp"/>

        <article id="content"> 
            <section class="container pageTitle">
                <span id="header">Account Setting</span>
            </section>

            <section class="container profilePic">
                <form name="profilePic">
                    <c:set var="defaultDir" value="uploads/${sessionScope.tarClient}.jpg" />
                    <%  String filePath =  (String)pageContext.getAttribute("defaultDir");
                        fileURL = pageContext.getServletContext().getResource(filePath);
                    %>
                    <% if (fileURL == null) {%>
                    <input type="image" class="changePicBtn" src="images/profilePic/default.jpg" />
                    <% } else {%>
                    <input type="image" class="changePicBtn" src="uploads/${sessionScope.tarClient}.jpg" />
                    <%}%>
                </form>
            </section>

            <section class="container credentialSection form">
                <div class="inner" id="afterForm">                     
                    <form action="updateAccountInfo.jsp" method="POST">
                        <input type="hidden" name="savewhat" value="accountInfo">
                        <table class="table1">
                            <tr>
                                <td>Username</td>                         
                                <td><input type="text" name="firstName" value="${client}" required class="disabled" disabled></td>
                            </tr>
                        </table>
                        <hr>
                        <table class="table2">
                            <tr>
                                <td>Old Password</td>                         
                                <td><input type="password" onkeyup="validateOldpassword()" name="oldPassword" value="" required id="oldPass" class="disabled" autofocus></td>
                            </tr>
                            <tr>
                                <td>New Password</td>
                                <td><input type="password" onkeyup="validateNewpassword()" name="newPassword" value="" id="newPass" class="disabled" required></td>
                            </tr>
                            <tr>
                                <td>Confirm Password</td>
                                <td><input type="password" onkeyup="validateNewpassword()" name="confirmPassword" value="" id="confirmPass" class="disabled" required></td>
                            </tr>
                            <input type="hidden" name="username" value="${userName}">
                            <input type="hidden" name="truePassword" value="${password}">
                            <input type="hidden" name="isActivated" value="${isActivated}">
                            <input type="hidden" name="acctype" value="${acctype}">
                            <tr>
                                <td colspan="2">
                                    <input type="submit" name="save" value="Save changes" id="submitBtn" class="btnDisabled" disabled>
                                    <a href="customerProfile.jsp"><input type="button" value="Cancel" class="btnDisabled" name="cancel"/></a>
                                </td>
                            </tr> 
                        </table>
                    </form>

                </div>
            </section>
        </article>
        <script>
            function validateOldpassword() {
                var newPass = document.getElementById('newPass').value;
                var oldPass = document.getElementById('oldPass').value;
                var confirmPass = document.getElementById('confirmPass').value;
                var targetElement = document.getElementById('afterForm');

                if (newPass === confirmPass && "${password}" === oldPass && newPass.value !== "" && confirmPass !== "" && oldPass !== "") {
                    var targetBtn = document.getElementById('submitBtn');
                    targetBtn.removeAttribute("disabled");
                    if (document.getElementById('notification1')) {
                        document.getElementById('notification1').parentNode.removeChild(document.getElementById('notification1'));
                    }

                }

                if ("${password}" !== oldPass && oldPass !== "") {
                    var notification = document.createElement("p");
                    notification.appendChild(document.createTextNode("* old password doesn't match"));
                    notification.id = "notification1";
                    document.getElementById("submitBtn").disabled = true;
                    if (document.getElementById('emptyOldPass')) {
                        document.getElementById('emptyOldPass').parentNode.removeChild(document.getElementById('emptyOldPass'));
                    }
                    if (document.getElementById('notification1')) {
                        document.getElementById('notification1').parentNode.removeChild(document.getElementById('notification1'));
                        targetElement.appendChild(notification);
                    } else {
                        targetElement.appendChild(notification);
                    }
                }
                if ("${password}" === oldPass) {
                    if (document.getElementById('notification1')) {
                        document.getElementById('notification1').parentNode.removeChild(document.getElementById('notification1'));
                    }
                    if (document.getElementById('emptyOldPass')) {
                        document.getElementById('emptyOldPass').parentNode.removeChild(document.getElementById('emptyOldPass'));
                    }
                }

                if (oldPass === "") {
                    var emptyOldPassword = document.createElement("p");
                    emptyOldPassword.id = "emptyOldPass";
                    emptyOldPassword.appendChild(document.createTextNode("* empty old password"));
                    document.getElementById("submitBtn").disabled = true;
                    if (document.getElementById('notification1')) {
                        document.getElementById('notification1').parentNode.removeChild(document.getElementById('notification1'));
                    }
                    if (document.getElementById('emptyOldPass')) {
                        document.getElementById('emptyOldPass').parentNode.removeChild(document.getElementById('emptyOldPass'));
                        targetElement.appendChild(emptyOldPassword);
                    } else {
                        targetElement.appendChild(emptyOldPassword);
                    }
                    
                }
                

                /********************************************************/

            }

            function validateNewpassword() {
                var oldPass = document.getElementById('oldPass').value;
                var newPass = document.getElementById('newPass').value;
                var confirmPass = document.getElementById('confirmPass').value;
                var targetElement = document.getElementById('afterForm');

                if (newPass === confirmPass && "${password}" === oldPass && newPass.value !== "" && confirmPass !== "" && oldPass !== "") {
                    var targetBtn = document.getElementById('submitBtn');
                    targetBtn.removeAttribute("disabled");
                    if (document.getElementById('notification2')) {
                        document.getElementById('notification2').parentNode.removeChild(document.getElementById('notification2'));
                    }
                    if (document.getElementById('emptyNewPass')) {
                        document.getElementById('emptyNewPass').parentNode.removeChild(document.getElementById('emptyNewPass'));
                    }
                }
                if (newPass !== confirmPass && newPass !== "" && confirmPass !== "") {
                    var notification = document.createElement("p");
                    notification.appendChild(document.createTextNode("* new password doesn't match"));
                    notification.id = "notification2";
                    document.getElementById("submitBtn").disabled = true;
                    if (document.getElementById('emptyNewPass')) {
                        document.getElementById('emptyNewPass').parentNode.removeChild(document.getElementById('emptyNewPass'));
                    }
                    if (document.getElementById('emptyConPassword')) {
                        document.getElementById('emptyConPassword').parentNode.removeChild(document.getElementById('emptyConPassword'));
                    }
                    if (document.getElementById('notification2')) {
                        document.getElementById('notification2').parentNode.removeChild(document.getElementById('notification2'));
                        targetElement.appendChild(notification);
                    }else{
                        targetElement.appendChild(notification);
                    }
                }
                if (newPass === confirmPass && newPass !== "" && confirmPass !== "") {
                    if (document.getElementById('notification2')) {
                        document.getElementById('notification2').parentNode.removeChild(document.getElementById('notification2'));                  
                    }
                    if (document.getElementById('emptyNewPass')) {
                        document.getElementById('emptyNewPass').parentNode.removeChild(document.getElementById('emptyNewPass'));
                    }
                    if (document.getElementById('emptyConPassword')) {
                        document.getElementById('emptyConPassword').parentNode.removeChild(document.getElementById('emptyConPassword'));
                    }
                }
                if (newPass === "") {
                    var emptyNewPassword = document.createElement("p");
                    emptyNewPassword.id = "emptyNewPass";
                    emptyNewPassword.appendChild(document.createTextNode("* empty new password"));
                    document.getElementById("submitBtn").disabled = true;
                    if (document.getElementById('notification2')) {
                        document.getElementById('notification2').parentNode.removeChild(document.getElementById('notification2'));                  
                    }
                    if (document.getElementById('emptyNewPass')) {
                        document.getElementById('emptyNewPass').parentNode.removeChild(document.getElementById('emptyNewPass'));
                        targetElement.appendChild(emptyNewPassword);
                    } else {
                        targetElement.appendChild(emptyNewPassword);
                    }
                } 
                if (confirmPass === "") {
                    var emptyConPassword = document.createElement("p");
                    emptyConPassword.id = "emptyConPassword";
                    emptyConPassword.appendChild(document.createTextNode("* empty confirmation password"));
                    document.getElementById("submitBtn").disabled = true;
                    if (document.getElementById('notification2')) {
                        document.getElementById('notification2').parentNode.removeChild(document.getElementById('notification2'));                  
                    }
                    if (document.getElementById('emptyConPassword')) {
                        document.getElementById('emptyConPassword').parentNode.removeChild(document.getElementById('emptyConPassword'));
                        targetElement.appendChild(emptyConPassword);
                    } else {
                        targetElement.appendChild(emptyConPassword);
                    }
                } 
            }
        </script>
    </body>
</html>
